<template>
    <div class="container">
        <el-card class="box-card" shadow="none" border="none">
            <div slot="header" class="clearfix">
                <el-page-header @back="goBack" content="公告详情"></el-page-header>
            </div>
            <h1>{{ data.title }}</h1>

            <el-divider content-position="center">{{ data.send_time }} | {{ data.sender }}</el-divider>

            <div class="notice_content">
                {{ data.content }}
                <el-backtop target=".notice_content">
                    <el-button type="primary" icon="el-icon-caret-top" circle></el-button></el-backtop>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {

    data() {
        return {
            notice_id: null,
            data: {
                id: 0,
                title: '',
                send_time: '',
                sender: '',
                content: ''
            }
        }
    },

    mounted() {
        this.notice_id = this.$route.query.id
        this.get_notice_detail()
    },

    methods: {
        // 返回上一页
        goBack() {
            this.$router.back()
        },

        async get_notice_detail() {
            // console.log(this.notice_id)
            try {
                const res = await this.$http.post("/findWarningById", {
                    // 携带数据
                    id: this.notice_id
                });
                this.data = res.data.data
            } catch (error) {
                // console.log(error);
            }
        },
    }
}
</script>

<style lang="less" scoped>
.container {
    width: 61.8vw;
    min-width: 950px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);

    .notice_content {
        height: 70vh;
        overflow: auto;

        -ms-overflow-style: none;
        /* IE 10+ */

        scrollbar-width: none;
        /* Firefox */
    }

    .notice_content::-webkit-scrollbar {
        display: none;
        /* Chrome Safari */
    }

}
</style>